<template>
  <el-cascader v-model="viewModel" @change="change" :props="props" :placeholder="'请选择或搜索'+label" :options="treeData" filterable v-if="treeData"></el-cascader>
</template>

<script>
  import api from 'api'
  import ala from 'ala'
  export default {
    model: {
      prop: 'dataModel',
      event: 'change'
    },
    props: {
      type: {},
      label: {
        default: ''
      },
      size: {},
      multiple: {
        default: false
      },
      isDiy: {
        default: false
      },
      dataModel: {}
    },
    data () {
      return {
        props: {
          multiple: false,
          expandTrigger: 'hover'
        },
        resultValue: null, // x-relation-select 返回的值
        treeData: null,
        viewModel: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        this.props.multiple = this.multiple
        this.treeData = await api.relationTree(this.type, this.isDiy)
        if (!this.treeData) {
          this.$ala.error('类型输入错误')
        }
        if (this.dataModel) {
          this.viewModel = this.dataModel
        } else {
          this.viewModel = []
        }
        // 数据量大时解决卡顿问题
        setTimeout(() => {
          // this.setViewModel()
          this.change()
          this.$forceUpdate()
        }, 100)
      },
      // 获取父节点数组
      setViewModel () {
        var count = 0
        var resultArray = []
        var dataModelArray = []
        if (this.dataModel) {
          if (this.multiple === false) {
            dataModelArray.push(this.dataModel)
          } else {
            dataModelArray = this.dataModel
          }
        }
        if (this.treeData && dataModelArray) {
          for (var i = 0; i < dataModelArray.length; i++) {
            count++
            var data = dataModelArray[i]
            var selectArray = []
            for (var oneIndex = 0; oneIndex < this.treeData.length; oneIndex++) {
              count++
              var oneData = this.treeData[oneIndex]
              if (oneData.value === data) {
                selectArray.push(oneData)
                break
              }
              if (oneData.children) {
                for (var twoIndex = 0; twoIndex < oneData.children.length; twoIndex++) {
                  count++
                  var twoData = oneData.children[twoIndex]
                  if (twoData.value === data) {
                    selectArray.push(oneData.value)
                    selectArray.push(twoData.value)
                    break
                  }
                  if (twoData.children) {
                    for (var threeIndex = 0; threeIndex < twoData.children.length; threeIndex++) {
                      count++
                      var threeData = twoData.children[threeIndex]
                      if (threeData.value === data) {
                        selectArray.push(oneData.value)
                        selectArray.push(twoData.value)
                        selectArray.push(threeData.value)
                        break
                      }
                    }
                  }
                }
              }
            }
            resultArray.push(selectArray)
          }
        }
        if (this.multiple === false) {
          // 2020年4月3日 验证 单选可以生效
          this.viewModel = this.dataModel
        } else {
          this.viewModel = this.dataModel
        }
      },
      // 获取值，单选的时候返回long，多选的时候返回数组
      change () {
        if (this.viewModel) {
          this.resultValue = []
          if (this.multiple === false) {
            this.resultValue = this.getLastValue(this.viewModel)
          } else {
            this.viewModel.forEach(r => {
              var value = this.getLastValue(r)
              if (this.multiple === true) {
                this.resultValue.push(value)
              }
            })
          }
        }
      },
      getLastValue (array) {
        if (array.constructor === Array) {
          var value = array[array.length - 1]
          if (value.constructor === Array) {
            return this.getLastValue(value)
          } else {
            return value
          }
        } else {
          return array
        }
      }
    },
    watch: {
      viewModel: {
        deep: true,
        handler (val) {
          this.$emit('change', this.resultValue)
        }
      }
    }
  }
</script>


<style lang="scss" scoped>
  .el-cascader {
    width: 100%;
  }
  .el-cascader-menu__wrap {
    width: 320px;
  }
</style>


